<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS/CSS各种操作信息提示效果</title>
    <style>
        .alert {
            padding: 10px;
            background-color: #f44336;
            margin-bottom: 15px;
        }

        .alert.success {
            background-color: #4CAF50;
        }

        .alert.info {
            background-color: #2196F3;
        }

        .alert.warning {
            background-color: #ff9800;
        }

        .closebtn {
            margin-left: 15px;
            color: white;
            float: right;
            font-size: 22px;
            line-height: 20px;
            transition: 0.3s;
        }

        .closebtn:hover {
            color: black;
        }
    </style>
</head>

<body>
    <h2>提示信息</h2>
    <p>点击 "x" 关闭提示框。</p>
    <div class="alert">
        <span class="closebtn">&times;</span>
        <strong>危险!</strong> 危险操作提示。
    </div>

    <div class="alert success">
        <span class="closebtn">&times;</span>
        <strong>成功!</strong> 操作成功提示。
    </div>

    <div class="alert info">
        <span class="closebtn">&times;</span>
        <strong>提示!</strong> 提示信息修改等。
    </div>

    <div class="alert warning">
        <span class="closebtn">&times;</span>
        <strong>警告!</strong> 提示当前操作要注意。
    </div>
    <script>
        var close = document.getElementsByClassName("closebtn");
        var i;

        for (i = 0; i < close.length; i++) {
            close[i].onclick = function () {
                var div = this.parentElement;
                div.style.opacity = "0";
                setTimeout(function () { div.style.display = "none"; }, 600);
            }
        }
    </script>
</body>

</html>